<template>
  <div>
    <div class="arrow-icon">
      <span class="material-symbols-outlined"> keyboard_double_arrow_down </span>
    </div>
    <div class="lab-list-title-2">
      <div class="title">创新理论与特色技术</div>
      <div class="desc">油气地球化学重点实验室</div>
    </div>
    <div class="lab-list-swiper">
      <div class="swiper-container mySwiper">
        <div class="swiper-wrapper" ref="domRef">
          <div class="swiper-slide" v-for="item in items" :key="item.name">
            <div
              :class="{
                'swiper-slide-card': true,
              }"
            >
              <HexagonSvg
                :width="240"
                :id="item.id"
                :name="item.name"
                :url="item.url"
                :is-current="true"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="technology-info">
        <div class="technology-info-title">
          <div class="name-cn">{{ items[activeIndexRef || 0].name }}</div>
        </div>
        <div class="technology-info-desc">
          有机-无机地球化学研究相结合，对比古老海相烃源岩与中新生界湖相烃源岩中的生烃母质类型及繁盛程度、古水体环境及有机质保存条件等的差异，提出中新元古代具备优质烃源岩形成的大气-海洋环境;探讨地球深
          部活动、天文轨道力、氧化事件等对海相/陆相有机质富集和烃源岩发育的控制作用;建立不同沉积环境中烃
          源岩发育模式，预测主要勘探地区有利烃源岩分布。
        </div>

        <!-- <div class="technology-info-sub">
          <i-button type="primary" style="width: 200px; height: 50px"
            >立即预约</i-button
          >
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
import HexagonSvg from '@/components/HexagonSvg.vue'

import labDemoImage from '@/assets/images/lab-demo.jpg'
const swiperRef = ref()
const domRef = ref()


const activeIndexRef = ref(0)

const items = ref([
  {
    id: 1,
    name: '海洋生物碳泵1',
    url: labDemoImage,
  },
  {
    id: 2,
    name: '海洋生物碳泵2',
    url: labDemoImage,
  },
  {
    id: 3,
    name: '海洋生物碳泵3',
    url: labDemoImage,
  },
  {
    id: 4,
    name: '海洋生物碳泵4',
    url: labDemoImage,
  },
  {
    id: 5,
    name: '海洋生物碳泵5',
    url: labDemoImage,
  },
])

onMounted(() => {
  // console.log('domRef', domRef.value)//
  swiperRef.value = new Swiper('.lab-list-swiper .mySwiper', {
    loop: true,
    slidesPerView: 2, //add(how many slides to show)
    centeredSlides: true,
    spaceBetween: 20,
    // autoplay: {
    //   delay: 5000,
    // },
    speed: 1200,
    effect: 'coverflow',
    coverflowEffect: {
      rotate: 0, // 倾斜角度
      stretch: -20,//92, // 重叠的距离
      depth: 200, // 位置深度（值越大z轴越远，看起来越小）
      modifier: 1, // 倍率（值越大，上面三个参数效果越明显）
      slideShadows: false, // 左右是否有阴影遮罩
    },
  })

  swiperRef.value.on('transitionStart', () => {
    const { realIndex } = swiperRef.value

    activeIndexRef.value = realIndex
  })
})
</script>

<style scoped lang="scss">
.lab-list-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  margin-top: dpi(4rem);
  .swiper-container {
    width: 100%;
    margin: 0 auto;
    height: 240px;
    overflow: hidden;
    .swiper-slide {
      // height: 300px;
      width: 350px;
      height: 240px;
      // background: red;
      // height: calc(632px / 3);
      // width: 350px;
      opacity: 0.5;
      z-index: 1;
      // opacity: 0.1;
      // transition: opacity 0.2s linear;
      &-card {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;

        .equ-img {
          width: 112px;
          height: 200px;
          margin-top: 24px;
          display: flex;
          align-items: center;
          transition: transform 0.3s linear;
          > img {
            width: 100%;
            // height: 100%;
          }
        }
        .names {
          position: absolute;
          bottom: 32px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .name-cn {
            margin-top: 120px;
            font-family: PingFangSC-Medium;
            font-size: 21px;
            letter-spacing: 1px;
            color: #ffffff;
          }
        }
      }
      &.swiper-slide-active {
        opacity: 1;
        z-index: 1000;
      }
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 168px;
    background: rgba(5, 113, 176, 0.1);
    &:hover {
      background: rgba(5, 113, 176, 0.2);
    }
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      font-size: 40px;
      color: #7fcfe2;
      font-size: 25px;
    }
  }

  .technology-info {
    width: 100%;
    margin: 0 auto;
    &-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .name-cn {
        font-family: PingFangSC-Semibold;
        // font-size: 18px;
        font-size: dpi(3rem);
        letter-spacing: 0px;
        color: #ffffff;
        margin-top: dpi(3rem);
        margin-bottom: 32px;
      }
    }

    &-desc {
      padding: 0 dpi(6.6rem);
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      line-height: dpi(3rem);
      letter-spacing: 0px;
      color: #7fcfe2;
      text-align: center;
    }
    &-sub {
      margin-top: 60px;
      display: flex;
      justify-content: center;
    }
  }
}

.lab-list-title-2{
  margin-top: dpi(2rem);
  text-align: center;
  .title{
    font-family: PingFangSC-Semibold;
    font-size: dpi(5rem);
    line-height: dpi(13rem);
    color: #ffffff;
  }
  .desc{
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    line-height: dpi(5rem);
    color: #7fcfe2;
    opacity: 0.8;
  }
}
.arrow-icon{
  margin-top: dpi(5rem);
  text-align: center;
  font-family: MaterialIconsOutlined-Regular;
  color: #7fcfe2;
  opacity: 0.2;
  > span {
    font-size: dpi(9rem);
  }
}
</style>
